<template>
  <div class="app-container">
    <div style="background-color: #fff">
      <!-- tab -->
      <div style="padding: 0 20px 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col>
              <div class="left-panel">
                <el-button
                  v-hasPermi="'suppliergoods/add'"
                  icon="el-icon-circle-plus-outline"
                  type="primary"
                  size="small"
                  @click="addlevel"
                  >添加标签</el-button
                >
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 订单列表 -->
        <el-row :gutter="20">
          <el-col>
            <el-table
              v-loading="loading"
              highlight-current-row
              :data="tableData"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
            >
              <el-table-column prop="id" label="ID" align="center" width="120">
              </el-table-column>
              <el-table-column prop="name" label="标签名称" align="center">
              </el-table-column>
              <el-table-column
                prop="created_at"
                label="创建时间"
                align="center"
              >
              </el-table-column>
              <el-table-column
                fixed="right"
                width="180"
                prop="address"
                label="操作"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    v-hasPermi="'suppliergoods/edit'"
                    type="text"

                    @click="editlevel(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-hasPermi="'suppliergoods/del'"
                    type="text"
                    style="margin-left: 10px;"
                    @click="deletelevel(scope.row.id)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table></el-col
          >
        </el-row>
      </div>
    </div>
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="500px"
      @close="
        () => {
          $refs.form.resetFields();
        }
      "
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="90px">
        <el-form-item label="标签名称:" prop="name">
          <el-input
            v-model="form.name"
            maxlength="10"
            show-word-limit
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          :loading="addPutLoading"
          type="primary"
          @click="comitadd('form')"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!--  -->
    <el-dialog
      title="编辑"
      :visible.sync="editdialogVisible"
      width="500px"
      @close="
        () => {
          $refs.form.resetFields();
        }
      "
    >
      <el-form ref="form" :rules="editrules" :model="forms" label-width="90px">
        <el-form-item label="标签名称:" prop="name">
          <el-input
            v-model="forms.name"
            maxlength="10"
            show-word-limit
            onkeyup="value =value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button
          :loading="addPutLoading"
          type="primary"
          @click="comitedit('form')"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!-- 页码 -->
    <!-- <el-row class="marginTop" style="text-align: right">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
      </el-pagination>
    </el-row> -->
  </div>
</template>

<script>
import { getLabelList, SaveLabel, delLabel } from "@/api/supplier/index";
import { json } from "body-parser";
const tableTheadOption = {
  updated_at: {
    label: "更新时间",
    field: "updated_at",
  },
  deleted_at: {
    label: "删除时间",
    field: "deleted_at",
  },
};

const allTableThead = ["updated_at", "deleted_at"];
const defaultTableThead = ["updated_at", "deleted_at"];
export default {
  name: "supplierlevel",
  data() {
    return {
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              console.log();
              if (value === "") {
                return callback(new Error("请输入标签名称"));
              } else {
                if (reg.test(value)) {
                  return callback(new Error("标签名称中不能包含特殊字符"));
                }
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      }, //表单验证
      editrules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              console.log();
              if (value === "") {
                return callback(new Error("请输入标签名称"));
              } else {
                if (reg.test(value)) {
                  return callback(new Error("标签名称中不能包含特殊字符"));
                }
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      }, //表单验证
      dialogVisible: false, //编辑弹窗
      editdialogVisible: false,
      form: {
        id: "",
        name: "",
      },
      forms: {
        id: "",
        name: "",
      },
      currentPage4: 1, //页码
      tableData: [],
      loading: true, //刷新
      addPutLoading: false,
    };
  },

  mounted() {
    this.getlevedlist();
  },
  methods: {
    // 刷新
    refresh() {
      this.getlevedlist();
    },
    //等级列表
    getlevedlist() {
      this.loading = true;
      getLabelList().then((res) => {
        this.tableData = res.data;
        this.loading = false;
      });
    },
    //删除
    deletelevel(id) {
      let param = {
        id: id,
      };
      this.$confirm("将删除该标签, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delLabel(param).then((res) => {
            this.$messages.success("删除成功");
            this.getlevedlist();
          });
        })
        .catch(() => {});
    },
    comitadd(formName) {
      //确认提交表单
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addPutLoading = true;
          //请求接口
          SaveLabel(this.form)
            .then((res) => {
              this.addPutLoading = false;
              this.dialogVisible = false;
              this.$messages.success("添加成功");
              this.getlevedlist();
            })
            .catch(() => {
              this.addPutLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    comitedit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addPutLoading = true;
          //请求接口
          SaveLabel(this.forms)
            .then((res) => {
              this.addPutLoading = false;
              this.editdialogVisible = false;
              this.$messages.success("编辑成功");
              this.getlevedlist();
            })
            .catch(() => {
              this.addPutLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加
    addlevel() {
      this.dialogVisible = true;
    },
    //编辑
    editlevel(row) {
      this.forms = JSON.parse(JSON.stringify(row));
      this.editdialogVisible = true;
    },
    //页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //点击搜索
    search() {
      console.log(this.query, "搜索的数据");
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.order_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 0;
  font-size: 13px;
  color: #666;
}
</style>
